<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">机构数</p>
										<p id="cur_org_num"><span class="color-org">0</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">班级数</p>
										<p id="cur_class_num"><span class="color-blue">0</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe605;</span>
									</div>
									<div class="right-text-con">
										<p class="name">文章数</p>
										<p id="cur_article_num"><span class="color-green">0</span>数据<span class="iconfont">&#xe60f;</span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					<!--服务器信息-->
					<div class="server-panel panel panel-default">
						<div class="panel-header">服务器信息</div>
						<div class="panel-body clearfix server_info_div">
							<div class="col-md-2">
								<p class="title">服务器环境</p>
								<span class="info">Apache/2.4.4 (Win32) PHP/5.4.16</span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器IP地址</p>
								<span class="info">127.0.0.1   </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器域名</p>
								<span class="info">localhost </span>
							</div>
							<div class="col-md-2">
								<p class="title"> java版本</p>
								<span class="info">5.4.16</span>
							</div>
							<div class="col-md-2">
								<p class="title">数据库信息</p>
								<span class="info">5.6.12-log </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器当前时间</p>
								<span class="info">2016-06-22 11:37:35</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/static/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/admin/lib/echarts/echarts.js"></script>
		<script src="/static/admin/js/jsutil.js?v=0.01" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			layui.use(['layer','jquery'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;
				//图表
				var myChart;
				require.config({
				    paths: {
				        echarts: '/static/admin/lib/echarts'
				    }
				});
				function getCurIcon(num1, num2){
					if (num1 > num2) return '&#xe628;';
					else if (num1 < num2) return '&#xe60f;';
					else return ' - ';
				}
				require(
				    [
				        'echarts',
				        'echarts/chart/bar',
				        'echarts/chart/line',
				        'echarts/chart/map'
				    ],
				    function (ec) {
						sendPost('/api/welcome/getCount', null, function(res){
							console.log(res);
							if (res.hasOwnProperty("serverInfo")){
								var arrayinfo = res.serverInfo.split(',');
								var spans = $('.server_info_div span.info');
								for (var i=0; i<arrayinfo.length; i++){
									$(spans[i]).html(arrayinfo[i]);
								}
							}
							if (res.hasOwnProperty("list_rd")){
								var  day_data=new Array(), org_data=new Array(), class_data=new Array(), article_data=new Array();
								var org_i =0, class_i = 0, article_i = 0;
								for(var i=0; i<res.list_rd.length; i++){
									var jdata = res.list_rd[i];
									if (jdata.code == 'org'){
										day_data[org_i] = jdata.add_date;
										org_data[org_i] = jdata.item_num;
										org_i++;
									}else if (jdata.code == 'class'){
										class_data[class_i] = jdata.item_num;
										class_i++;
									}else if (jdata.code == 'article'){
										article_data[article_i] = jdata.item_num;
										article_i++;
									}
								}
								$('#cur_org_num').html('<span class="color-org">'+org_data[0]+'</span>数据<span class="iconfont">'+getCurIcon(org_data[0], org_data[1])+'</span>');
								$('#cur_class_num').html('<span class="color-org">'+class_data[0]+'</span>数据<span class="iconfont">'+getCurIcon(class_data[0], class_data[1])+'</span>');
								$('#cur_article_num').html('<span class="color-org">'+article_data[0]+'</span>数据<span class="iconfont">'+getCurIcon(article_data[0], article_data[1])+'</span>');
								/////////
								//--- 折柱 ---
								myChart = ec.init(document.getElementById('chart'));
								myChart.setOption(
									{
									 title: {
										text: "数据统计",
										textStyle: {
											color: "rgb(85, 85, 85)",
											fontSize: 18,
											fontStyle: "normal",
											fontWeight: "normal"
										}
									},
									tooltip: {
										trigger: "axis"
									},
									legend: {
										data: ["机构", "班级", "文章"],
										selectedMode: false,
									},
									toolbox: {
										show: true,
										feature: {
											dataView: {
												show: false,
												readOnly: true
											},
											magicType: {
												show: false,
												type: ["line", "bar", "stack", "tiled"]
											},
											restore: {
												show: true
											},
											saveAsImage: {
												show: true
											},
											mark: {
												show: false
											}
										}
									},
									calculable: false,
									xAxis: [
										{
											type: "category",
											boundaryGap: false,
											data: day_data
										}
									],
									yAxis: [
										{
											type: "value"
										}
									],
									 grid: {
										x2: 30,
										x: 50
									},
									series: [
										{
											name: "机构",
											type: "line",
											smooth: true,
											itemStyle: {
												normal: {
													areaStyle: {
														type: "default"
													}
												}
											},
											data: org_data
										},
										{
											name: "班级",
											type: "line",
											smooth: true,
											itemStyle: {
												normal: {
													areaStyle: {
														type: "default"
													}
												}
											},
											data: class_data
										},
										{
											name: "文章",
											type: "line",
											smooth: true,
											itemStyle: {
												normal: {
													areaStyle: {
														type: "default"
													},
													color: "rgb(110, 211, 199)"
												}
											},
											data: article_data
										}
									]
								}
								);
								
								////////
							}
						});
					}
				);
				$(window).resize(function(){
					myChart.resize();
				})
			});
		</script>
	</body>
</html>
